<template>
  <Header :page="true"></Header>
  <div class="page-content">
    <!-- tabar部分 -->
    <div class="tabar m-8 ml-0 flex justify-between">
      <n-input-group>
        <n-input v-model="params.searchKey" :style="{ width: '30%' }" />
        <n-button type="primary" @click="handleSearch">搜索</n-button>
      </n-input-group>
      <n-button round type="primary" @click="handleAdd">发布</n-button>
    </div>
    <forumAdd ref="forumAddRef" @refresh="onSuccess"/>
    <!-- 二级路由 -->
    <router-view v-slot="{ Component }">
      <component :is="Component" ref="routerViewRef"/>
    </router-view>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import Header from '@/components/header/Header.vue'
import forumAdd from './components/forum-add.vue';

const forumAddRef = ref(null)
const params = reactive({
  searchKey: ''
})
const routerViewRef = ref(null)
// 发布
const handleAdd = () => {
  forumAddRef.value.showModal = true
}
// 搜索
const handleSearch = () => {
  console.log(params.searchKey)
}
// 刷新
const onSuccess = () => {
  routerViewRef.value?.getForumList()
}
</script>

<style lang="less" scoped>
.forum {
}
</style>
